<!-- 歌手信息页面 -->
<template>
	<view>
		<!-- 信号栏变色 -->
		<view class="nav" :style="'background-color: rgba(0, 0, 0,' + op + ')'">
			<view class="status-bar" :style="'height:' + statusBarHeight + 'px'"></view>
		</view>
		<view v-if="!singles.name" class="loading">
			<u-loading-icon color="#1989fa"></u-loading-icon>
		</view>
		<view v-else class="artist artist-android">
			<view class="header" :style="'margin-top:' + (titletop + titleheight / 2 - 10) + 'px'">
				<u-icon name="arrow-left" color="#fff" size="20" @click="back"></u-icon>
			</view>
			<view class="hd">
				<image class="cover" :src="singles.picUrl" alt="" />
				<view class="artist-info">
					<p class="name">
						{{ singles.name }}
						<span v-if="singles.trans">（{{ singles.trans }}）</span>
					</p>
					<p class="rank" v-if="ranking">歌手榜{{ region(ranking.type) }}地区 No.{{ ranking.rank }}</p>
					<view class="simple">
						<p class="nickname" v-if="user && user.nickname">
							昵称：{{ user.nickname }}
							<i class="vip-icon" v-if="user.vipType"></i>
							<i class="package-icon" v-if="user.anchor"></i>
						</p>
						<p class="follow">
							<span v-if="artist.identifyTag">
								<span class="followCnt">
									关注
									<span class="count">{{ follows.followCnt }}</span>
								</span>
								|
							</span>
							<span class="fansCnt" :style="artist.identifyTag ? '' : 'margin-left: 0px;'">
								粉丝
								<span class="cout">{{ num(follows.fansCnt) }}</span>
							</span>
						</p>
						<p class="identities-area" v-if="artist.identifyTag || (artist.identities && artist.identities.length)">
							<span class="identifyTag" v-for="item in artist.identifyTag" :key="item">{{ item }}</span>
							<span class="identities" v-for="item in artist.identities" :key="item">{{ item }}</span>
						</p>
					</view>
				</view>
			</view>
			<h2>歌手简介</h2>
			<view class="intro">
				<p :class="hide ? 'f-thide3 hide' : 'f-thide3'">
					{{ singles.briefDesc }}
				</p>
				<view class="full" @click="open" v-if="singles.briefDesc.length > 72">
					{{ hide ? '完整歌手介绍' : '收起' }}
					<i :class="hide ? 'arrow' : 'arrow arrow-up'"></i>
				</view>
			</view>
			<span>
				<h2 class="mgt8">热门单曲</h2>
				<view class="hot-song">
					<HitSongList :songlist="list.slice(0, 5)" :routerId="id"></HitSongList>
				</view>
				<a v-if="getRecentDay <= time(album.publishTime) && album" :to="`/albumart?id=${album.id}`">
					<h2 class="mgt8">最新音乐</h2>
					<view class="album-info">
						<view class="album-cover" :style="{ backgroundImage: `url(${album.blurPicUrl})` }"></view>
						<view class="album-other">
							<p class="album-name">{{ album.name }}</p>
							<p class="album-artist-name">{{ singer(album.artists) }}</p>
							<p class="album-songs">
								<span>{{ album.size }}首</span>
								<span class="date">{{ time(album.publishTime) }}</span>
							</p>
						</view>
					</view>
				</a>
			</span>
		</view>
	</view>
</template>

<script>
import HitSongList from '@/components/HitSongList.vue';
import { albumArtistsAPI, artistAPI, followAPI, singleAPI } from '@/api';
import { filterTime, numberFormat, getRecentDay_Date } from '@/utils/common';
import { singer } from '@/utils/dedicated';
export default {
	components: { HitSongList },
	data() {
		return {
			hide: true, //展示
			id: '', //歌手id
			singles: [], //歌曲信息
			artist: {}, //入驻艺人
			follows: {}, //歌手粉丝数量
			list: [], //歌曲列表
			ranking: {}, //排名
			user: '', //昵称
			album: {}, //专辑信息

			op: 0,
			titletop: 0,
			titleheight: 0,
			statusBarHeight: 0
		};
	},
	computed: {
		//名字格式化
		singer,
		//数字格式化
		num() {
			return (val) => {
				return numberFormat(val);
			};
		},
		//时间格式化
		time() {
			return (val) => {
				return filterTime(val);
			};
		},
		//判断地区榜单
		region() {
			return (val) => {
				switch (val) {
					case 1:
						return '华语';
					case 2:
						return '欧美';
					case 3:
						return '韩国';
					case 4:
						return '日本';
				}
			};
		},
		// 一个月前的日期
		getRecentDay() {
			return getRecentDay_Date(-30);
		}
	},
	onLoad(option) {
		this.id = option.id;
		// 调用APP中的数据
		getApp().getHeight();
		this.titletop = getApp().titletop;
		this.titleheight = getApp().titleheight;
		this.statusBarHeight = getApp().statusBarHeight;
	},
	async mounted() {
		await this.getData();
		await this.albumArtists();
	},
	onPageScroll(res) {
		let top = res.scrollTop;
		let height = this.statusBarHeight + 44;
		if (top <= height) {
			this.op = Math.round((top / height) * 100) / 100;
		} else {
			this.op = 1;
		}
	},
	methods: {
		//歌手简介展示
		open() {
			this.hide = !this.hide;
		},
		//歌曲信息
		getData() {
			singleAPI(this.id).then((res) => {
				this.singles = res.artist;
				this.list = res.hotSongs;
			});
			//歌手信息
			artistAPI(this.id).then((res) => {
				this.artist = res.data.artist;
				this.ranking = res.data.artist.rank;
				this.user = res.data?.user;
			});
			//歌手粉丝数量
			followAPI(this.id).then((res) => {
				this.follows = res.data;
			});
		},
		//专辑信息
		albumArtists() {
			albumArtistsAPI(this.id).then((res) => {
				this.album = res.hotAlbums[0];
			});
		},
		back() {
			uni.navigateBack();
		}
	}
};
</script>

<style lang="scss" scoped>
.nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
}

.title {
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
}

.loading {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%);
}

.artist {
	background-color: #fcfcfd;

	.header {
		position: absolute;
		left: 10px;
		z-index: 100;
		color: #fff;
	}

	.hd {
		position: relative;
		padding-top: 82.9%;

		.cover {
			position: absolute;
			top: 0;
			width: 100%;
			height: 100%;
		}
	}

	.hd:after {
		position: absolute;
		top: 0;
		content: '';
		background: rgba(0, 0, 0, 0.2);
		width: 100%;
		height: 100%;
		left: 0;
	}

	.artist-info {
		position: absolute;
		left: 16px;
		bottom: 30px;
		color: #fff;
		z-index: 2;

		.name {
			font-size: 20px;
			line-height: 20px;
		}

		.rank {
			margin-top: 15px;
			font-size: 13px;
		}

		.simple {
			margin-top: 15px;
			opacity: 0.8;
			font-size: 12px;
		}

		.vip-icon {
			display: inline-block;
			width: 22px;
			height: 12px;
			background: url('https://s3.music.126.net/mobile-new/img/vip@3x.png?4a183d32090d2333c9eec1d1b6b84a67=');
			background-size: cover;
			margin-left: 4px;
			vertical-align: bottom;
		}

		.package-icon {
			display: inline-block;
			width: 22px;
			height: 12px;
			background: url('');
			background-size: contain;
			background-repeat: no-repeat;
			margin-left: 8px;
			vertical-align: bottom;
		}

		.follow {
			margin-top: 10px;
		}

		.followCnt {
			margin-right: 10px;
			font-size: 13px;
		}

		.identities-area {
			height: 12px;
			margin-top: 10px;
		}

		.identifyTag {
			margin-right: 4px;
		}

		.identities {
			border: 1px solid #fff;
			border-radius: 4px;
			padding: 2px;
			transform: scale(0.7);
			display: inline-block;
			opacity: 0.6;
			margin-left: -4px;
		}

		.count {
			margin-left: 4px;
		}

		.fansCnt {
			font-size: 13px;
			margin-left: 10px;
		}

		p {
			margin: 0;
		}
	}

	h2 {
		font-size: 17px;
		position: relative;
		z-index: 2;
		margin-top: -5px;
		padding: 15px;
		background: #fff;
		font-weight: 700;
		margin-bottom: 0;
	}

	.intro {
		background: #fff;
		padding: 0 16px 18px;

		.f-thide3 {
			color: #666;
			font-size: 14px;
			margin: 0;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
		}

		.hide {
			-webkit-line-clamp: 3;
		}
	}

	.full {
		font-size: 14px;
		color: #666;
		text-align: center;
		margin-top: 25px;
	}

	.arrow {
		display: inline-block;
		position: relative;
		width: 9px;
		height: 9px;
		background: url('');
		background-size: contain;
		background-repeat: no-repeat;
		left: 4px;
		top: 0;
	}

	.arrow-up {
		transform: rotate(180deg);
		width: 12px;
		height: 12px;
		top: 2px;
	}

	.mgt8 {
		margin-top: 8px;
		color: #333;
	}

	.hot-song {
		position: relative;
		padding: 0 10px 0 0;
		background: #fff;
		min-height: 100px;
	}
}

.album-info {
	position: relative;
	display: flex;
	height: 80px;
	background: #fff;
	padding: 0 15px 20px;
	align-items: center;

	.album-cover {
		position: relative;
		width: 80px;
		height: 80px;
		border-radius: 4px;
		background-size: cover;
		margin-right: 25px;
	}

	.album-cover:after {
		position: absolute;
		content: '';
		width: 90px;
		height: 100%;
		background: url('https://s3.music.126.net/mobile-new/img/album@3x.png?0ec33f3%E2%80%A6') 100% no-repeat;
		background-size: contain;
		background-repeat: no-repeat;
		right: -10px;
	}

	.album-name {
		font-size: 15px;
		color: #333;
	}

	.album-artist-name {
		font-size: 13px;
		color: #888;
	}

	.album-songs {
		margin-top: 10px;
		font-size: 13px;
		color: #888;
	}

	.date {
		margin-left: 4px;
	}
}
</style>
